import {
  Button,
  Card,
  DatePicker,
  Divider,
  Form,
  Input,
  InputNumber,
  Modal,
  Popconfirm,
  Switch,
  Upload,
} from "antd";
import { PlusOutlined, FormOutlined, DeleteOutlined } from "@ant-design/icons";
import { Space, Table, Pagination } from "antd";
import React, { useEffect, useState } from "react";

import { getTrademarkReq } from "@/api/trakemade/trakemade";

export default function Index() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [getbaseTrademark, setbaseTrademark] = useState(false);
  const [trademark, setTrademark] = useState([]);
  const [current, setCurrent] = useState(1);
  const [pageSize, setpageSize] = useState(3);
  const [total, setTotal] = useState(0);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const getTrademark = async () => {
    const res = await getTrademarkReq(current, pageSize);
    setTrademark(res.data.records);

    setTotal(res.data.total);
  };

  useEffect(() => {
    getTrademark();
  }, [current, pageSize]);

  return (
    <div>
      <Card
        title={
          <Button
            icon={<PlusOutlined />}
            type="primary"
            onClick={() => {
              return showModal();
            }}
          >
            添加
          </Button>
        }
      >
        <Table
          rowKey={"id"}
          columns={[
            {
              title: "序号",
              // dataIndex: "id",
              key: "number",
              align: "center",
              width: 80,
              render(value, rows, index) {
                return (current - 1) * pageSize + index + 1;
              },
            },
            {
              title: "品牌名称",
              dataIndex: "tmName",
              key: "tmName",
              align: "center",
            },
            {
              title: "品牌LOGO",
              dataIndex: "logoUrl",
              align: "center",
              render(logoUrl) {
                return <img src={logoUrl} alt="" width={70} height={70} />;
              },
            },

            {
              title: "操作",
              width: 300,
              render(item: any, record: any, index: number) {
                return (
                  <Space>
                    <Button
                      type="primary"
                      icon={<FormOutlined />}
                      onClick={() => {}}
                    >
                      
                      修改
                    </Button>

                    <Popconfirm
                      title="确认要删除该信息吗?"
                      placement="topRight"
                      onConfirm={() => {}}
                      okText="确定"
                      cancelText="取消"
                    >
                      <Button type="primary" danger icon={<DeleteOutlined />}>
                        删除
                      </Button>
                    </Popconfirm>
                  </Space>
                );
              },
            },
          ]}
          dataSource={trademark}
          pagination={false}
          bordered
        ></Table>
        <Pagination
          total={total}
          current={current}
          pageSize={pageSize}
          // showSizeChanger
          showQuickJumper
          onChange={(newcurrent, newpageSize) => {
            setCurrent(newcurrent);
            setpageSize(newpageSize);
          }}
          // showTotal={(total) => `Total ${total}`}
        />
      </Card>
      <Modal
        title="添加品牌"
        visible={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form.Item label="品牌名称">
          <Form.Item
            label=""
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
        </Form.Item>

        <Form.Item label="品牌LOGO" valuePropName="fileList">
          <Upload action="/upload.do" listType="picture-card">
            <div>
              <PlusOutlined />
              <div style={{ marginTop: 8 }}>Upload</div>
            </div>
          </Upload>
        </Form.Item>
      </Modal>
    </div>
  );
}
